<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 40px;
            display: flex;
            align-items: center;
        }

        input {
            width: 300px;
            height: 100%;

        }

        .error {
            color: red;
            font-size: 30px;
            display: none;
        }

        .success {
            color: yellowgreen;
            font-size: 30px;
            display: none;

        }
    </style>
</head>

<body>
    <div>
        <input type="text" placeholder="请输入用户名">
        <span class="error">用户名错误</span>
        <span class="success">用户名正确</span>
    </div>
    <script>
        // 创建一个正则对象
        const userNameRegRxp = /^[a-z-A-Z0-9-_]{6,16}$/
        //获取输入框
        const input = document.querySelector("input")
        //给输入框绑定失去焦点事件
        input.addEventListener("blur", function () {
            //测试输入框的值是否满足正则对象的规则
            if (userNameRegRxp.test(this.value.trim())) {
                document.querySelector(".success").style.display = "block"
            } else {
                document.querySelector(".error").style.display = "block"
            }

        })
    </script>
</body>

</html>